<template>
  <div id="chart1">
    <Bar :data="chartData" :options="chartOptions" height="100%" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Bar } from 'vue-chartjs';
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from 'chart.js';
import { IChart1Data } from '@/interface/index';
ChartJS.register(
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
);

const { t } = useI18n();

const props = defineProps<{
  data: Array<IChart1Data>;
}>();

const chartData = computed(() => {
  let data = {
    labels: props.data.map((x) => {
      return x.ProcedureCode;
    }),
    datasets: [
      {
        label: t('Tab.Chart1.FinishedPercentage'),
        backgroundColor: function (ctx: {
          dataset: { data: { [x: string]: any } };
          dataIndex: string | number;
        }): string {
          let value = ctx.dataset.data[ctx.dataIndex];
          if (value <= 20) {
            return '#C33531';
          } else if (value > 20 && value <= 80) {
            return '#EFE42A';
          } else {
            return '#64BD3D';
          }
        },
        data: props.data.map((x) => {
          return x.FinishedPercentage;
        }),
      },
    ],
  };
  return data;
});
const chartOptions = computed(() => {
  let data = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        labels: {
          font: {
            size: 24,
          },
        },
      },
    },
    scales: {
      x: {
        ticks: {
          font: {
            size: 24,
          },
        },
      },
      y: {
        suggestedMin: 0,
        suggestedMax: 100,
        ticks: {
          font: {
            size: 24,
          },
        },
      },
    },
  };
  return data;
});
</script>

<style lang="scss" scoped>
div#chart1 {
  height: 100%;
}
</style>
@/types
